<?php
//use front\assets\AppAsset;
use yii\helpers\Html;

$this->title = '宏三内测专区';
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title><?= Html::encode($this->title)?></title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
	<meta name="format-detection" content="telephone=no,email=no" />
	<meta name="mobileOptimized" content="width" />
	<meta name="handheldFriendly" content="true" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="stylesheet" href="/static/css/main.css" />
	<script src="/static/script/zepto.min.js"></script>
	<script src="/static/script/touch.slide.js"></script>
	<script src="/static/script/transform.x.js"></script>
</head>
<body class="u-pb3">

<a class="m-sch-a" href="/web/search/index">&nbsp;</a>

<div id="j-slide" class="m-slide">
	<ul class="f-cb">
		<?php foreach($data['banner'] as $banner){?>
			<li><a href="<?= $banner['url']?>"><img src="<?= $banner['pic_url']?>" /></a></li>
		<?php }?>
	</ul>
</div>

<?php foreach($data['theme'] as $theme){?>
	<h4 class="m-topic"><a href="<?= $theme['url']?>"><img src="<?= $theme['pic']?>" /></a></h4>
<?php }?>


<div id="J_slt_idxTab" class="m-idx-tab f-cb">
	<a href="javascript:;" data class="z-on">宏三热门</a>
	<a href="javascript:;">宏三特价</a>
</div>

<div id="J_slt_idxCnt">

	<div class="m-idx-tras">
		<div>
			<h4 id="J_slt_idxTab0" class="f-cb m-idx-tab0">
				<a data-val="0" href="javascript:;" class="z-on">推荐</a>

				<?php if(!empty($data['cate'])) {
					foreach ($data['cate'] as $k => $name) {
						?>
						<a data-val="<?= $k ?>" href="javascript:;"><?= $name ?></a>
					<?php }
				}?>
			</h4>
		</div>
	</div>

	<fieldset id="J_hotPro">
		<ul id="J_slt_idxCnt0" class="m-idx-list0">
			<?php foreach($data['hotPro'] as $hotPro){?>
				<li class="J_forLink" data-url="<?= Yii::$app->request->hostInfo . '/web/product/detail?pid=' . $hotPro['pid']?>">
					<a href="/web/product/detail?pid=<?= $hotPro['pid'] ?>"><img src="<?= $hotPro['img']?>" /></a>
					<h5>
						<a href="/web/product/detail?pid=<?= $hotPro['pid'] ?>"><?= $hotPro['name']?></a>
						<span><?= $hotPro['name']?></span>
						<em><i><?= $hotPro['comm']?></i></em>
						<b>￥ <?= $hotPro['price']?></b>
					</h5>
				</li>
			<?php } ?>
		</ul>
	</fieldset>
	<img class="m-loading" id="J_loading" src="/static/img/loading.gif" />

</div>

<div class="m-nav f-cb u-bg1">
	<a href="javascript:;" class="z-on">首页</a>
	<a href="/web/category/category-list?shop_id=1001">分类</a>
	<a href="/web/cart/view?shop_id=<?= '1001'//yii::$app->session->get('shop_id')?>">购物车</a>
	<a href="/web/my">我的</a>
</div>

<!-- 横向滚动 -->
<script>
	// 焦点图
	$('#j-slide').touchSlide({'scale':.495, speed:.3});

	// 滑动选择
	$('#J_slt_idxTab0').transformX();

	$(function(){

		// 商品 区域链接 点击
		$(document.body).on('tap', '.J_forLink', function(){

			window.location.href = $(this).attr('data-url');
		});

		// 热门 & 特价
		var zon = 'z-on';
		$('#J_slt_idxTab').on('tap', 'a', function(){

			var _that = $(this);

			if(_that.hasClass(zon)) return !1;

			_that.addClass(zon).siblings().removeClass(zon);

			var _i = _that.index();

			if(_i == 0){

				// 动态加载数据
				$.ajax({ url: '/web/default/discart?funcName=?', dataType:'jsonp', data:{'type': _i}, async: false,

					success: function(_info){

						var _prod = createProd0(_info['prod'], _i);

						// 动态创建类别
						var _cate = createCate(_info['cate'], _i);
						var _html0 = createList0(_info['list0'], '新入驻品牌');
						var _html1 = createList1(_info['list1'], '热门品类');
						var _html2 = createList2(_info['list2'], '热门品牌');

						// 页面生成
						$('#J_slt_idxCnt').html(_cate + _prod);
						// 滑动
						$('#J_slt_idxTab0').transformX();
					}
				});

			}else{

				// 动态加载数据
				$.ajax({ url: '/web/default/discart?funcName=?', dataType:'jsonp', data:{'type': _i}, async: false,

					success: function(_info){

						var _prod = createProd1(_info['prod'], _i);

						// 动态创建类别
						var _cate = createCate(_info['cate'], _i);
						var _html1 = createList1(_info['list1'], '品类折扣');
						var _html2 = createList2(_info['list2'], '品牌折扣');

						// 页面生成
						$('#J_slt_idxCnt').html(_cate + _prod);
					}
				});
			}

		});

		// 热门 元素
		$('#J_slt_idxCnt').on('tap', '#J_slt_idxTab0 a', function(){


			var _that = $(this);

			if(_that.hasClass(zon)) return !1;

			_that.addClass(zon).siblings().removeClass(zon);

			var _val = _that.attr('data-val');
			page = 2;
			_ground = false
			// 动态加载数据
			$.ajax({ url: '/web/default/hotpro?funcName=?', dataType:'jsonp', data:{'type':_val},

				success: function(_info){

					$('#J_slt_idxCnt0').html(createProd0(_info, _val, false));
				}
			});

		});

		// 特价 元素
		$('#J_slt_idxCnt').on('tap', '#J_slt_idxTab1 a', function(){

			var _that = $(this);

			var _that = $(this);

			if(_that.hasClass(zon)) return !1;

			_that.addClass(zon).siblings().removeClass(zon);

			var _val = _that.attr('data-val');


			// 动态加载数据
			$.ajax({ url: '/web/default/dispro?funcName=?', dataType:'jsonp', data:{'type':_val},

				success: function(_info){

					$('#J_slt_idxCnt1').html(createProd1(_info, _val, false));
				}
			});
		});

		//滑动分页
		// J_forRun
		var _loading = $('#J_loading');
		var forRun = document.getElementById('J_hotPro');
		var start = 0, flag = true, page = 2, _ground = false;
		forRun.addEventListener('touchstart', function(ev){
			start = ev.touches[0].pageY;
			if(_ground){
				_ground = false;
				flag = false;
				msgPopup("已是最后一页");
				return !1;
			}
		}, false);
		forRun.addEventListener('touchmove', function(ev){

			// 筛选栏显示与隐藏
			var end = ev.touches[0].pageY - start;

			if(end > 0){

				flag = true;
			}else{

				// 控制上拉加载
				if($(document).height() == ($(window).scrollTop() + $(window).height()) && flag){

					// 加载锁定
					flag = false;

					var _val = 0
					$('#J_slt_idxTab0').each(function(i){

						$(this).find('a').each(function(){
							var _this = $(this);
							if(_this.hasClass(zon)){
								_val = _this.attr('data-val');
								console.log(_val);
							}

						});
					});


					// 先显示 加载中...
					_loading.css({display:'block'});

					$.ajax({ url: '/web/default/list?funcName=?', dataType:'jsonp', data:{'page': page,'per-page':8,type:_val}, timeout:5000,

						success: function(_info){

							if(_info.length != 0){
								page ++;
							}else{
								_ground = true;
							}


							// 请求成功后 隐藏 加载中...
							_loading.css({display:'none'});


							$('#J_slt_idxCnt0').append(createList(_info));

							// 加载解锁
							flag = true;
						}
					});

				}
			}

		}, false);
	});

	function createList(json){

		var _li = '';
		for(var i in json) {
			_li += '<li class="J_forLink" data-url="/web/product/detail?pid=' + json[i]['pid'] + '">' +
				'<a href="/web/product/detail?pid=' + json[i]['pid'] + '"><img src="' + json[i]['img'] + '?>" /></a>' +
				'<h5>' +
				'<a href="/web/product/detail?pid=' + json[i]['pid'] + '">' + json[i]['name'] + '</a>' +
				'<span>' + json[i]['name'] + '</span>' +
				'<em><i>' + json[i]['comm'] + '</i></em>' +
				'<b>￥ ' + json[i]['price'] + '</b>' +
				'</h5>' +
				'</li>';
		}
		return _li;
	}


	function createCate(json, chr){

		var _cate = '';
		var i, x = 0;
		for(var i in json){

			_cate += '<a data-val="'+ i +'" href="javascript:;"'+ (x === 0 ? ' class="z-on"' : '') +'>'+ json[i] +'</a>';
			x++;
		}

		if(_cate !== '') _cate = '<div class="m-idx-tras"><div><h4 id="J_slt_idxTab'+ chr +'" class="f-cb m-idx-tab'+ chr +'">'+ _cate +'</h4></div></div>';

		return _cate;
	}

	function createList0(json, name){

		var _html = '';

		for(var i in json){

			_html += '<li><a href="javascript:;'+ i +'"><img src="'+ json[i]['img'] +'" /></a></li>';
		}

		if(_html !== '') _html = '<h5 class="m-idx-tt">'+ name +'</h5><ul class="m-idx-nbr">'+ _html +'</ul>';

		return _html;
	}

	function createList1(json, name){

		var _html = '';

		for(var i in json){

			_html += '<li><img src="'+ json[i]['img'] +'" /><a href="javascript:;'+ i +'">'+ json[i]['name'] +'</a></li>';
		}

		if(_html !== '') _html = '<h5 class="m-idx-tt">'+ name +'</h5><ul class="m-idx-hot f-cb">'+ _html +'</ul>';

		return _html;
	}

	function createList2(json, name){

		var _html = '';

		for(var i in json){

			_html += '<li><a href="javascript:;'+ i +'"><img src="'+ json[i]['img'] +'" /></a></li>';
		}

		if(_html !== '') _html = '<h5 class="m-idx-tt">'+ name +'</h5><ul class="m-idx-hbr f-cb">'+ _html +'</ul>';

		return _html;
	}

	function createProd0(json, chr, isUl){

		isUl = typeof(isUl) !== 'undefined' ? false : true;

		var _html = '';
		if(json == ''){
			_html += '<h3 class="m-no-data">暂无热卖</h3>';
		}
		for(var i in json){
			_html += '<li class="J_forLink" data-url="<?= Yii::$app->request->hostInfo . '/web/product/detail?pid='?>'+ json[i]['pid'] + '">' +
				'<a href="/web/product/detail?pid='+ json[i]['pid'] +'"><img src="'+ json[i]['img'] +'" /></a>' +
				'<h5>' +
				'<a href="/web/product/detail?pid='+ json[i]['pid'] +'">'+ json[i]['name'] +'</a>' +
				'<span>'+ json[i]['desc'] +'</span>' +
				'<em><i>'+ json[i]['comm'] +'</i></em><b>￥ '+ json[i]['price'] +'</b>' +
				'</h5>' +
				'</li>';
		}

		if(isUl && _html !== '') _html = '<ul id="J_slt_idxCnt'+ chr +'" class="f-cb m-idx-list'+ chr +'">'+ _html +'</ul>';

		return _html;
	}

	function createProd1(json, chr, isUl){

		isUl = typeof(isUl) !== 'undefined' ? false : true;

		var _html = '';
		if(json == '' && chr == 1){
			_html += '<h3 class="m-no-data">暂无折扣</h3>';
		}else if(json == '' && chr == 2) {
			_html += '<h3 class="m-no-data">暂无优惠券</h3>';
		}else if(json == '' && chr == 3) {
			_html += '<h3 class="m-no-data">暂无兑用券</h3>';
		}else{
			_html += '<h3 class="m-no-data">暂无特价</h3>';
		}
		for(var i in json){
			_html += '<li class="J_forLink" data-url="<?= Yii::$app->request->hostInfo . '/web/product/detail?pid='?>'+ json[i]['pid'] + '">' +
				'<a href="/web/product/detail?pid='+ json[i]['pid'] +'"><img src="'+ json[i]['img'] +'" /></a><span class="'+ json[i]['cls'] +'">'+ json[i]['note'] +'</span>' +
				'<h6>' +
				'<a href="/web/product/detail?pid='+ json[i]['pid'] +'">'+ json[i]['name'] +'</a>' +
				'<em>'+ json[i]['desc'] +'</em>' +
				'<u><b>￥'+ json[i]['price1'] +'</b><small>￥'+ json[i]['price1'] +'</small></u>' +
				'</h6>' +
				'</li>';
		}

		if(isUl && _html !== '') _html = '<ul id="J_slt_idxCnt'+ chr +'" class="f-cb m-idx-list'+ chr +'">'+ _html +'</ul>';

		return _html;
	}
</script>
</body>
</html>